<!DOCTYPE html>
<html lang="zh" class="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>LearnKu 终身编程者的知识社区
    </title>
    <link rel="shortcut icon" href="__IMG__/icon.png"/>
    <!-- Styles -->
  <link href="__CSS__/vendors.css" rel="stylesheet">
  <link href="__CSS__/myself.css" rel="stylesheet">
  <script type="text/javascript" src="__JS__/jquery.js"></script>
  <script type="text/javascript" src="__JS__/jquery.validate.min.js"></script>
  <script type="text/javascript" src="__JS__/verify.js"></script>

  <!-- <link href="__CSS__/app.css" rel="stylesheet"> -->

    <style type="text/css">
        @font-face {
            font-family: 'FontAwesome';
            src:url('__FONT__/FontAwesome.eot');/* IE9*/
            src:url('__FONT__/FontAwesome.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('__FONT__/FontAwesome.woff2') format('woff2'), /* chrome、firefox、opera、Safari, Android, iOS */
            url('__FONT__/FontAwesome.woff') format('woff'), /* chrome、firefox */
            url('__FONT__/FontAwesome.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('__FONT__/FontAwesome.svg#uxFontAwesome') format('svg'); /* iOS 4.1- */
        }
    .userModel {
          display:block;
          text-align:left;
          background:#fff;
          border:none;
          box-shadow: 1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);
          transform-origin:50% 25%;
          border-radius:.28571429rem;
          margin:30px auto;
          padding:20px;
      }
      #navbox {
        display:flex;
        flex-direction: row;
        margin-left:auto;        
      }
      .selected{
        cursor:pointer;
        background:rgba(0,0,0,.03) !important;
        color:rgba(0,0,0,.95) !important;
      }

  </style>
</head>

<body class=" auth-register-form-page">

    <style>

        .ui.top.menu {
            border-top: 4px solid #00b5ad;
        }

        .ui.fluid.search .results {
            width: 550px;
        }
        @media  only screen and (max-width: 450px) {
            #navbox{
                display:none !important;
            }
        }
        @media  only screen and (max-width: 767px) {
            .ui.fluid.category.search {
                display:none !important;
            }
        }
        @media  only screen and (max-width: 990px) {
            #li1,#li2,#li3,#li4 {
                display:none!important;
            }
        }

        @media  only screen and (max-width: 600px) {
            .ui.container>.ui .icon .input {
                height: 52px;
                flex-direction: initial;
                border
                display: none!important;
            }
        }
        @media  only screen and (max-width: 767px) {
            .ui.top.menu > .ui.container {
                height: 52px;
                flex-direction: initial;
            }
        }
        /* 顶部导航栏 */
        .ui.top.menu {
            border-top: 4px solid #00b5ad;
        }

        /* 右边导航栏顶部样式 */
        .ui.top-color.segment:not(.inverted) {
            border-top: 2px solid #00b5ad;
        }

        /* 右边导航栏顶部样式 */
        .ui.top-color.card:not(.inverted) {
            border-top: 2px solid #00b5ad;
        }

        a {
            color: #1775cc;
        }

        a:hover, a:focus {
            color: #0081f9;
            transition: color .15s ease 0s;
        }

        /* 主要按钮 */

        .ui.primary.buttons .button, .ui.primary.button {
            background-color: #00b5ad;
            border-color: #00b5ad;
        }

        /* 主要按钮选中状态 */
        .ui.primary.buttons .button:hover, .ui.primary.button:hover, .ui.primary.button:focus, .ui.primary.buttons .button:focus{
            background-color: #00b5ad;
            border-color: #00b5ad;
        }

        /* 外框按钮 */
        .ui.basic.primary.buttons .button, .ui.basic.primary.button {
            color: #00b5ad !important;
            box-shadow: 0px 0px 0px 1px #00b5ad inset !important;
        }

        /* 外框按钮选中状态 */
        .ui.basic.primary.buttons .button:hover, .ui.basic.primary.button:hover {
            color: #00b5ad !important;
            box-shadow: 0px 0px 0px 1px #00b5ad inset !important;
        }
        .ui.basic.primary.buttons .button:active, .ui.basic.primary.button:active, .ui.basic.primary.buttons .active.button, .ui.basic.primary.active.button, .ui.basic.buttons .button:hover, .ui.basic.button:hover,.ui.basic.primary.buttons .button:focus, .ui.basic.primary.button:focus {
            color: #00b5ad !important;
            box-shadow: 0px 0px 0px 1px #00b5ad inset !important;
        }

        
        .footer {
            max-height: max-content;
        }
        #navbox a
    </style>


    
    <!-- <div class="ui top menu sidebar stackable">
        <div class="item">
            <img class="" style="width:26px;height:26px;margin-top:-2px;" src="__IMG__/icon.png">
            <span class="site-name ml-2">LearnKu</span>
        </div>
        <form class="ui fluid category  item secondary" action="https://learnku.com/search" method="GET">
          <div class="ui icon input">
            <input class="prompt" name="q" type="text" placeholder="搜索" value="">
            <i class="search icon"></i>
        </div>
    </form>
    
    </div> -->


<div class="pusher">

    <div class="main container">

        <nav class="ui main borderless menu top" id="topnav">
            <div class="ui container" style="height:40px">

              <div class="ui inline scrolling community-nav dropdown mr-2" style="padding-left: 22px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;">
                <div class="text site-logo" style="color:#888888;display: flex;">

                    <img class="" style="width:26px;height:26px;margin-top:-2px;" src="__IMG__/icon.png">
                    <span class="site-name">LearnKu </span>
                </div>
 
        </div>


        <form class="ui fluid category search item secondary hide-on-991" action="https://learnku.com/search" method="GET">
          <div class="ui icon input">
            <input class="prompt" name="q" type="text" placeholder="搜索" value="">
            <i class="search icon"></i>
        </div>
        <div class="results"></div>
    </form>

    <ul id="navbox">
        
        <li><a href="{:url('index/index')}" class="item secondary">首页</a></li>
        <li id = "forumPage"> <a   href="{:url('index/view')}" class="item secondary">论坛</a>
            <ul class = 'setList'>
                <li><a href="{:url('index/view')}">Laravel</a></li>
                <li><a href="">python</a></li>
            </ul>
        </li>
        <li id = "li1"> <a href="{:url('index/changepa')}" class="item secondary">修改密码</a></li>
        <li id="li2"><a href="{:url('index/me')}" class="item secondary">上传头像</a></li>
        <li id="li4"> <a href="{:url('user/login')}" class="item secondary">登录</a></li>
        <li id="li3"><a href="{:url('user/reg')}" class="item secondary">注册</a></li>
        <li ><a href="{:url('index/logout')}" class="item secondary">注销</a></li>
        <li  class="item secondary">
            {if session('name') }
            欢迎用户: <?=session('name');?>
            <img id="u_img" src="__UPLOAD__/<?=session('uImg')?>">
                {else /}请登录
            {/if}
        </li>
    </ul>
   
</div>

</nav>
<div class="ui centered grid stackable container mt-5 pt-3" style="margin:40px auto">

  <div class="userModel login small" style="width:350px";>
      <div class="header">
        <h4 class="modal-title ">
            <img class=" display-inline-block mr-2" style="width:32px;height:32px;" src="__IMG__/icon.png"> <span style="position: relative;top: -8px;">请登录</span>
        </h4>
    </div>
    <div class="content">
        <form class="ui form login" name="form" method="POST" action="{:url('user/doLogin')}" accept-charset="UTF-8">
          <div class="field">
            <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" name="username" placeholder="邮 箱 or 手 机 or 用户名" value="" required>
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" name="password" placeholder="密 码" value="" required>
            </div>
        </div>
        <p id="verifyCodeDemo" style="display: flex;flex-direction: row;">
            <input  style="width:40%" class="code_input" oninput="check()" name ="code" value="" type="text" id="code_input" placeholder="请输入验证码">
            <br />
            <span id="picyzm" name="picyzm" value="" style="margin-left:30px; "></span>

            <div class="login-tip" id = "tip"></div>
        </p>
        <button class="ui primary right labeled icon button" type="submit">
            <i class="right arrow icon"></i>
            提交
        </button>

        <span class="pull-right mt-2 rm-link-color" style="margin-left: 80px">
            <a class="btn btn-link " href="https://learnku.com/auth/forget" target="_blank">
                忘记密码?
            </a>
            <span class="text-mute">or</span>
            <a class="btn btn-link " href="https://learnku.com/auth/register" target="_blank">
                注册
            </a>
        </span>

        <div class="clearfix"></div>
        <div class="ui horizontal divider fs-tiny text-mute">
            第三方账号登录
        </div>

        <a class="ui button fluid mt-2 green wechat-login-link" href="https://learnku.com/auth/oauth?driver=wechat"><i class="icon wechat " ></i> 微信登录</a>

        <a class="ui button fluid mt-2 basic" id="login-required-submit" href="https://learnku.com/auth/oauth?driver=github"><i class="icon github alternate"></i> GitHub 登录</a>

    </form>
</div>
</div>

<!-- 登录部分结束 -->
</div>
</div>

<div class="ui inverted vertical footer segment">
    <div class="ui center aligned container">


        <div class="ui stackable inverted divided grid">
            <div class="four wide column">
                <h4 class="ui inverted header">
                    <img src="__IMG__/icon2.png" alt="" style="width: 32px;border-radius: 6px;position: relative;top: -5px;">
                    关于 LearnKu
                </h4>
                <div class="ui inverted  text-center">
                    <div class="lh-3">LearnKu 是终身编程者的修道场</div>
                    <div class="lh-3">摒弃世俗浮躁，追求技术精湛</div>
                </div>

                <div class="ui inverted  text-center mt-3 rm-link-color tdu">
                    <i class="icon birthday"></i> <a href="https://learnku.com/articles/28735" >LearnKu 诞生的故事</a>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header">资源推荐</h4>
                <div class="ui inverted link list">
                    <li class="mb-1">
                        <a class="item" href="https://learnku.com/docs/guide">
                            《社区使用指南》
                        </a>
                    </li>
                    <li class="mb-1">
                        <a class="item" href="https://learnku.com/docs/writing-docs">
                            《文档撰写指南》
                        </a>
                    </li>
                    <li class="mb-1">
                        <a class="item" href="https://learnku.com/docs/guide/protocol/4992">
                            《LearnKu 社区规范》
                        </a>
                    </li>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header">赞助商</h4>
                <div class="ui inverted link list">
                    <a href="https://passport.ucloud.cn/?invitation_code=rami45zj5kpm&amp;ytag=reZ5E7" rel="nofollow noopener noreferrer" class="item" target="_blank" style="line-height: 28px;">
                        <img src="__IMG__/sponsor1.png" title="本站服务器由 UCloud 赞助" class="ui popover" style="height: 20px;margin-bottom: -4px;margin-right: 3px;display: inline-block;">
                    </a>
                    <a href="https://www.upyun.com/" rel="nofollow noopener noreferrer" class="item" target="_blank" style="line-height: 28px;">
                        <img src="__IMG__/sponsor2.png" title="社区 CDN 赞助商" class="ui popover" style="height: 20px;margin-bottom: -4px;margin-right: 3px;display: inline-block;">
                    </a>
                    <a href="http://www.sendcloud.net/" rel="nofollow noopener noreferrer" class="item" target="_blank" style="line-height: 28px;">
                        <img src="__IMG__/sponsor3.png" title="订阅邮件赞助商：SendCloud" class="ui popover" style="height: 20px;margin-bottom: -4px;margin-right: 3px;display: inline-block;">
                    </a>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header">其他信息</h4>
                <div class="ui inverted link list">

                    <li>
                        <a class="item" href="https://learnku.com/contact?code=outsource">
                            <i class="icon thumbs up"></i> 软件外包
                        </a>
                    </li>
                    <li>
                        <a class="item" href="https://learnku.com/docs/guide/administrator/4485" >
                            <i class="icon heartbeat"></i> 成为版主
                        </a>
                    </li>
                    <li>
                        <a class="item" href="https://learnku.com/quizzes" >
                            <i class="icon wpforms"></i> 所有测验
                        </a>
                    </li>
                    <li>
                        <a class="item" href="https://learnku.com/contact">
                            <i class="icon wechat" aria-hidden="true" ></i> 联系站长（反馈建议）
                        </a>
                    </li>
                </div>
            </div>
        </div>

        <div class="ui inverted section divider"></div>
        <div style="color: rgb(137, 137, 140);font-size:0.9em;"  class="rm-link-color">
            <p>
                <a href="http://beian.miit.gov.cn/" target="_blank">粤ICP备18099781号-6</a>
                <span class="mx-2">|</span>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030502004330" target="_blank"><img src="__IMG__/copyright.png" width="20" style="position: relative;top: 4px;"> 粤公网安备 44030502004330号</a>
                <span class="mx-2">|</span>
                <a href="https://learnku.com/lk">违法和不良信息举报</a>
            </p>
            <p style=" margin-top:-8px;margin-bottom: -0px;" class="ui inverted signature">
              由 <a href="https://learnku.com/contact" target="_blank" style="color: inherit;">Summer</a> 设计和编码 <span style="color: #e27575;font-size: 14px;">❤</span>
          </p>
      </div>
  </div>
</div>
</div>
<script type="text/javascript">
    let forumPage = document.querySelector('#forumPage')
    let setList = document.querySelector('.setList')
    forumPage.onmouseover = function(){
        setList.style.display = 'flex'
    }
    forumPage.onmouseout = function(){
        setList.style.display = 'none'
    }
</script>

<script type="text/javascript">
        //初始化验证码
        var verifyCode = new GVerify({
            id : "picyzm",
            type : "blend"
        });
        //点击按钮验证
        var btn = document.getElementById("btn");
        var span = document.querySelector("#tip")
        var code = document.getElementById("code_input");
        function check(){
            if (code.value){
                var res = verifyCode.validate(code.value);
                if (!res){ 
                    span.style.color = "#bc3b36"
                    span.innerHTML = "验证码错误"
                    return res;
                }else{
                    // span.style.color = "green"
                    // span.innerHTML = "校验成功"
                    span.innerHTML = ""
                }
            }
        }
        btn.onclick = check()
    </script>
</body>

</html>